<template>
  <div class="goods">
    <van-nav-bar
      title="商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="list" v-for="value in dataList" :key="value.id">
      <van-card
        price="8.00"
        origin-price="10.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        class="item"
      >
        <template #tags>
          <van-tag plain type="primary">好物</van-tag>
          <van-tag plain type="primary">快速</van-tag>
        </template>
        <template #footer>
          <van-button size="small"  type="primary">选型</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const dataList = ref([
  {
    num: "2",
    price: "2.00",
    desc: "描述信息",
    title: "商品标题",
    thumb: "https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
    id: 1,
  },
  {
    num: "2",
    price: "2.00",
    desc: "描述信息",
    title: "商品标题",
    thumb: "https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
    id: 2,
  },
  {
    num: "2",
    price: "2.00",
    desc: "描述信息",
    title: "商品标题",
    thumb: "https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
    id: 3,
  },
  {
    num: "2",
    price: "2.00",
    desc: "描述信息",
    title: "商品标题",
    thumb: "https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
    id: 4,
  },
  {
    num: "2",
    price: "2.00",
    desc: "描述信息",
    title: "商品标题",
    thumb: "https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
    id: 5,
  },
]);

const onClickLeft = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.goods {
  min-height: 100vh;
  background: #fff;
  color: #000;
  .title {
    text-align: center;
    font-size: 24px;
  }
}
::v-deep .van-nav-bar__title {
  color: #000;
}
::v-deep .van-card__title {
  font-size: 16px;
}
::v-deep .van-card__desc {
  font-size: 12px;
}
.item {
  margin: 10px 0;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
}
.content {
  padding: 20px;
}
</style> 